<template>
	<el-dialog :title="dialog.title" v-model="dialog.isShowDialog" append-to-body :close-on-click-modal="false" width="1000px">
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="提现单号" align="center" prop="withdrawal_no" />
			<el-table-column label="提现时间" align="center" prop="create_time" :formatter="formatterCreateTime" />
			<el-table-column label="提现金额" align="center" prop="apply_money" />
			<el-table-column label="结算卡联行号" align="center" prop="bank_code" />
			<el-table-column label="结算银行卡开户名" align="center" prop="account_name" />
			<el-table-column label="结算银行卡账号" align="center" prop="account_no" />
			<el-table-column label="手续费" align="center" prop="procedure_money" />
			<el-table-column label="应到账金额" align="center" prop="money" />
			<el-table-column label="实际到账金额" align="center" prop="money_deserved" />
			<el-table-column label="打款状态" align="center" prop="payment_status" :formatter="formatterPaymentStatus" />
			<el-table-column label="打款失败原因" align="center">
				<template #default="scope">
					<el-tooltip v-if="scope.row.fail_reason" effect="light" :content="scope.row.fail_reason" placement="top">
						<el-button>查看</el-button>
					</el-tooltip>
					<span v-else>----</span>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { supplier1Api } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

const Supplier1Api = supplier1Api();
export default {
	setup() {
		const state = reactive({
			dialog: {
				isShowDialog: false,
				type: '',
				title: '提现记录',
				submitLoading: false,
			},
			queryParams: {
				type: 4,
				status: 2,
				pageNum: 1,
				pageSize: 10,
			},
			tableList: [],
			loading: false,
			total: 0,
		});

		/********** 方法事件 **********/
		//打开
		const openDialog = () => {
			state.dialog.isShowDialog = true;
			state.queryParams = {
				type: 4,
				status: 2,
				pageNum: 1,
				pageSize: 10,
			};
			getList();
		};
		// 刷新列表
		const getList = () => {
			state.loading = true;
			_supplierWithdrawalPaymentList(state.queryParams);
		};
		// 打款状态字典
		const formatterPaymentStatus = (row: any) => {
			switch (row.payment_status) {
				case 0:
					return '待打款';
				case 1:
					return '打款中';
				case 2:
					return '打款成功';
				case 3:
					return '打款失败';
				default:
					return '未知错误';
			}
		};
		// 提现时间字典
		const formatterCreateTime = (row: any) => {
			return timeDictionary(row.create_time);
		};

		/********** 网络请求 **********/
		// 已提现货款记录
		const _supplierWithdrawalPaymentList = (params: Object) => {
			Supplier1Api.supplierWithdrawalPaymentList(params)
				.then((res) => {
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => (state.loading = false));
		};

		return {
			...toRefs(state),
			openDialog,
			getList,
			formatterPaymentStatus,
			formatterCreateTime,
		};
	},
};
</script>
